<template>
  <!-- 新增录入画面对话框-->
  <el-dialog
    :title="form.title"
    center
    :visible.sync="openState"
    width="1024px"
    :close-on-click-modal="false"
    @close="closeFn"
  >
    <el-form ref="editForm" :model="form" label-width="110px">
      <div v-if="this.form.manageType == '1'">
        <el-card class="form-card payerInfo-card">
          <div slot="header" class="label-header-msg">
            <span>费项信息</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="费项代码" prop="feeCode">
                <el-input v-model="form.feeCode" placeholder="" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="费项说明" prop="feeCodeDesc">
                <el-input v-model="form.feeCodeDesc" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div v-if="this.form.manageType == '2'">
        <el-card class="form-card payerInfo-card">
          <div slot="header" class="label-header-msg">
            <span>标准手续费信息</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="费项代码" prop="feeCode">
                <el-input v-model="form.feeCode" placeholder="" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分段标志" prop="segmtFlg">
                <el-select v-model="form.segmtFlg" placeholder="" style="width: 100%" :disabled="true">
                  <el-option
                    v-for="dict in dictMap.FEE_SEGMT_FLG"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="this.form.segmtFlg === '1'">
              <ht-table
                ref="dataTable1"
                :showSerialNumber="false"
                :multi-select="false"
                :dictMap="dictMap"
                :reqConfig="reqConfig"
                :queryParams="queryParams"
                :tableBindColumns="tableBindColumns"
                :initData="false"
              ></ht-table>
          </div>
          <div v-if="this.form.segmtFlg !== '1'">
            <el-row>
              <el-col :span="12">
                <el-form-item label="收费模式" prop="feeType">
                  <el-select v-model="form.feeType" placeholder="" style="width: 100%" :disabled="true">
                    <el-option
                      v-for="dict in dictMap.FEE_TYPE"
                      :key="dict.value"
                      :label="`${dict.value}-${dict.text}`"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="最低手续费" prop="feeMin">
                  <el-input v-model="form.feeMin" placeholder="" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最高手续费" prop="feeMax">
                  <el-input v-model="form.feeMax" placeholder="" :disabled="true"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="固定金额" prop="fixAmt">
                  <el-input v-model="form.fixAmt" placeholder="" :disabled="true"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="比例(%)" prop="rate">
                  <el-input v-model="form.rate" placeholder="" :disabled="true"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
      <div v-if="this.form.manageType == '3'">
        <el-card class="form-card payerInfo-card">
          <div slot="header" class="label-header-msg">
            <span>扣费账户信息</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="账号" prop="actNo">
                <el-input v-model="form.actNo" placeholder="" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="扣费账号" prop="chargeActno">
                <el-input v-model="form.chargeActno" placeholder="" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户名称" prop="custName">
                <el-input v-model="form.custName" placeholder="" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账户状态" prop="actStatus">
                <el-select v-model="form.actStatus" placeholder="" style="width: 100%" :disabled="true">
                  <el-option
                    v-for="dict in dictMap.FEE_CHARGE_STATUS"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="form.remarks" type="textarea" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div v-if="this.form.manageType == '4'">
        <el-card class="form-card payerInfo-card">
          <div slot="header" class="label-header-msg">
            <span>优惠手续费信息</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="优惠类型" prop="discountType">
                <el-select v-model="form.discountType" placeholder="" style="width: 100%" :disabled="true">
                  <el-option
                    v-for="dict in dictMap.FEE_DISCOUNT_TYPE"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="discountStatus">
                <el-select v-model="form.discountStatus" placeholder="" style="width: 100%" :disabled="true">
                  <el-option
                    v-for="dict in dictMap.FEE_DISCOUNT_STATUS"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="this.form.discountType === '1'">
            <el-col :span="12">
              <el-form-item label="起始时间" prop="beginTime">
                <el-time-select
                  placeholder=""
                  v-model="form.beginTime"
                  style="width: 100%"
                  :picker-options="{
                start: '00:00',
                end: '23:59',
                step: '00:05',
              }"
                  :disabled="true"
                ></el-time-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="endTime">
                <el-time-select
                  placeholder=""
                  style="width: 100%"
                  v-model="form.endTime"
                  :picker-options="{
                start: '00:00',
                end: '23:59',
                step: '00:05',
                minTime: form.startTime,
              }"
                :disabled="true"
                ></el-time-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="this.form.discountType === '2'">
            <el-col :span="12">
              <el-form-item label="渠道类型" prop="channelType">
                <el-select v-model="form.channelType" placeholder="" style="width: 100%" :disabled="true">
                  <el-option
                    v-for="dict in dictMap.TXN_SOURCE"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="this.form.discountType === '3'">
            <el-col :span="12">
              <el-form-item label="客户等级" prop="custLevel">
                <el-select v-model="form.custLevel" placeholder="" style="width: 100%" :disabled="true">
                  <el-option
                    v-for="dict in dictMap.FEE_CUST_LEVEL"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="this.form.discountType === '4'">
            <el-col :span="12">
              <el-form-item label="特殊客户" prop="spcust">
                <el-input v-model="form.spcust" placeholder="" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="优惠方式" prop="discountMethod">
                <el-select style="width: 100%;" v-model="form.discountMethod" placeholder="优惠方式" :disabled="true">
                  <el-option
                    v-for="dict in dictMap.FEE_DISCOUNT_METHOD"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" v-if="this.form.discountMethod==='1'||this.form.discountMethod==='3'">
              <el-form-item label="优惠数值" prop="discountValue">
                <ht-amount-input
                  v-model="form.discountValue"
                  placeholder="优惠数值"
                  :disable="true"
                ></ht-amount-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="this.form.discountMethod==='2'||this.form.discountMethod==='3'">
              <el-form-item label="优惠折扣(%)" prop="discountRate">
                <el-input
                  type="number"
                  v-model="form.discountRate"
                  placeholder="优惠折扣"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="form.remarks" type="textarea" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div v-if="this.form.manageType == '5'">
        <el-card class="form-card payerInfo-card">
          <div slot="header" class="label-header-msg">
            <span>手续费扣收方式信息</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="费项代码" prop="chargeCode">
                <el-input v-model="form.feeCode" placeholder="" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="chargeStatus">
                <el-select style="width: 100%;" v-model="form.chargeStatus" placeholder="系统编号" disabled>
                  <el-option
                    v-for="dict in dictMap.FEE_CHARGE_STATUS"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="自动扣费类型" prop="chargeAutotype">
                <el-select v-model="form.chargeAutotype" placeholder="" style="width: 100%" disabled>
                  <el-option
                    v-for="dict in dictMap.FEE_CHARGE_AUTOTYPE"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="扣费时间" prop="chargeTime">
                <el-date-picker style="width: 100%;" v-model="form.chargeTime" value-format="yyyyMMddHHmmss"
                                type="datetime" disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="form.remarks" type="textarea" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <el-card class="form-card payerInfo-card">
        <div slot="header" class="label-header-msg">
          <span>处理信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="录入操作员：" prop="mdTlrno">
              <el-input v-model="form.mdTlrno" placeholder="" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入时间：" prop="mdTime">
              <el-date-picker
                v-model="form.mdTime"
                type="datetime"
                value-format="yyyyMMddHHmmss"
                placeholder=""
                style="width: 100%"
                :disabled="true"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作" prop="opttype">
              <el-select v-model="form.opttype" placeholder="" style="width: 100%" :disabled="true">
                <el-option
                  v-for="dict in dictMap.FEE_OPTTYPE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="审核操作员：" prop="audTlrno">
              <el-input v-model="form.audTlrno" placeholder="" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核时间：" prop="audTime">
              <el-date-picker
                v-model="form.audTime"
                type="datetime"
                value-format="yyyyMMddHHmmss"
                placeholder=""
                style="width: 100%"
                :disabled="true"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-otherInfo">
              <el-form-item label="审核附言：" prop="audRemarks">
                <el-input type="textarea" v-model="form.audRemarks" placeholder="" disabled/>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFn">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { approve, reject, detailsApiUrlConfig } from "@/api/cnaps/tips/FeeItemManage/FeeManageQuery.js";
import HtAmountInput from "@/views/components/HtAmountInput";

export default {
  name: "EditInfo",
  components: {HtAmountInput},
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {},
  data() {
    return {
      isLoading: false,
      // 是否显示弹出层
      openState: false,
      reqConfig: detailsApiUrlConfig,
      queryParams: {
        manageType: "",
        feeCode: "",
        feeId: "",
      },

      tableBindColumns: [
        { label: `起始金额`, prop: "lowAmt", align: "center" },
        {
          label: `截止金额`,
          prop: "highAmt",
          align: "center",
        },
        {
          label: `段内最低手续费`,
          prop: "sFeeMin",
          align: "center",
          formatter: (row) => {
            if (!row.sFeeMin) {
              return "-";
            } else {
              return row.sFeeMin;
            }
          },
        },
        {
          label: `段内最高手续费`,
          prop: "sFeeMax",
          align: "center",
          formatter: (row) => {
            if (!row.sFeeMax) {
              return "-";
            } else {
              return row.sFeeMax;
            }
          },
        },
        {
          label: `固定金额`,
          prop: "fixAmt",
          align: "center",
        },
        {
          label: `收费模式`,
          prop: "feeType",
          align: "center",
          dictCode: "FEE_TYPE",
        },
        {
          label: `比例(%)`,
          prop: "rate",
          align: "center",
        },
      ],
    };
  },
  watch: {
    form: {
      handler(newValue) {
        if (newValue.segmtFlg === "1") {
          this.$nextTick(() => {
            this.$set(this.queryParams, "feeId", newValue.feeId);
            this.$set(this.queryParams, "manageType", newValue.manageType);
            this.$set(this.queryParams, "feeCode", newValue.feeCode);
            this.$refs.dataTable1.doQuery();
          });
        }
      },
    },
  },
  mounted() {},
  methods: {
    // 表单重置
    reset() {
      this.resetForm("editForm");
    },
    closeFn() {
      this.openState = false;
      this.reset();
    },

    show() {
      this.openState = true;
    },
    // 审核方法
    approveFn() {
      this.isLoading = true;
      approve({ ...this.form })
        .then((res) => {
          this.isLoading = false;
          this.$emit("editComplete", true);
          this.msgSuccess("已审核!");
          this.closeFn();
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    // 拒绝方法
    rejectFn() {
      this.isLoading = true;
      reject(this.form)
        .then((res) => {
          this.isLoading = false;
          this.$emit("editComplete", true);
          this.msgSuccess("已拒绝!");
          this.closeFn();
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
